<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script charset="utf-8" type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/com.wxd.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/pageview.js"></script>
    <title>账号列表</title>
    <link rel="stylesheet" type="text/css" href="/style/com.wxd.css"/>
    <link rel="stylesheet" type="text/css" href="/style/table.css"/>
    <style>
        .box {display: flex;flex-direction: column;}

        .root_box_top {height: 60px;}

        .root_box_center {flex: 1;}

        .root_box_bottom {height: 38px;}

        .root_box_bottom label {padding-left: 5px;padding-right: 5px;}

        .alertBoxBg .alertBox li {height: 23px;line-height: 20px;}

        .alertBoxBg .alertBox label {padding-left: 5px;padding-right: 5px;text-align: right;width: 80px;display: inline-block;}

        .alertBoxBg .alertBox input, .alertBoxBg .alertBox select {width: 180px;border: #8c8c8c 1px solid;}
    </style>
    <script>

        let pageView = null;

        function search() {
            wxd.loading();
            let urlQuery = new wxd.Map().loadSearch();
            pageView.remoteGetData(urlQuery);
        }

        // 用于显示的格式化版本
        function formatForDisplay(str) {
            if (typeof str === "string") {
                return str;
            }
            return JSON.stringify(str, null, 2); // 会保留换行和缩进
        }

        function formatJsonWithNewlines(obj) {
            if (typeof obj === 'string') {
                try {
                    obj = JSON.parse(obj);
                } catch (e) {
                    // 如果解析失败，直接格式化字符串
                    return obj;
                }
            }
            // 使用2个空格进行缩进，自动包含换行符
            return JSON.stringify(obj, null, 2);
        }

        function escapeJSString(str) {
            return formatForDisplay(str).replace(/\\/g, "\\\\")
                .replace(/'/g, "\\'")
                .replace(/"/g, "\\\"")
                .replace(/\n/g, "\\n")
                .replace(/\r/g, "\\r")
                .replace(/\t/g, "\\t");
        }

        function createRow(number, row, index) {
            // language=HTML
            let tr = `
                <tr>
                    <td>${number}</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#" onclick="editUser('${row.userName}','${row.admin}','${row.phone}');">修改</a>
                    </td>
                    <td>${row.userName}</td>
                    <td>${row.admin}</td>
                    <td>${row.phone}</td>
                    <td>${row.host}</td>
                </tr>
            `;
            return tr;
        }

        $(() => {
            wxd.loading();
            let urlQuery = new wxd.Map().loadSearch();
            pageView = new PageView("/admin/account/queryList", search, createRow);
            search();
        });

        function editUser(userName, admin, phone) {
            // language=HTML
            let content = `
                <ul>
                    <li>
                        <label for="admin">管理员：</label>
                        <select id="admin">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </li>
                    <li>
                        <label for="userName">用户名：</label>
                        <span id="userName">${userName}</span>
                    </li>
                    <li>
                        <label for="password">密码：</label>
                        <input id="password" type="password">
                    </li>
                    <li>
                        <label for="phone">电话：</label>
                        <input id="phone" type="text" value="${userName}">
                    </li>
                </ul>
            `;

            // 在创建 content 后，设置 admin 的选中值
            setTimeout(() => {
                $("#admin").val(admin);
            }, 200);

            let alertBox = new wxd.message.Alert(content, "账号管理");
            alertBox.okShow = "修改";
            alertBox.okCallback = () => {
                let userName = $("#userName").val();
                let password = $("#password").val();
                let admin = $("#admin").val();
                let phone = $("#phone").val();
                if (userName === "" || password === "" || phone === "") {
                    wxd.message.notice("请填写完整信息");
                    return;
                }
                return new wxd.netty.PostRequest(
                    "/admin/account/edit",
                    {
                        userName: userName,
                        password: password,
                        admin: admin,
                        phone: phone
                    },
                    (data) => {
                        if (data.code === 1) {
                            wxd.message.notice("添加成功");
                            search();
                            return true;
                        } else {
                            wxd.message.notice(data.msg);
                            return false;
                        }
                    })
                    .async(false)
                    .send();
            };
            alertBox.show();
        }

        function addUser() {
            // language=HTML
            let content = `
                <ul>
                    <li>
                        <label for="admin">管理员：</label>
                        <select id="admin">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </li>
                    <li><label for="userName">用户名：</label> <input id="userName" type="text"></li>
                    <li><label for="password">密码：</label> <input id="password" type="password"></li>
                    <li>
                        <label for="phone">电话：</label> <input id="phone" type="text">
                    </li>
                </ul>
            `;

            let alertBox = new wxd.message.Alert(content, "账号管理");
            alertBox.okShow = "新增";
            alertBox.okCallback = () => {
                let userName = $("#userName").val();
                let password = $("#password").val();
                let admin = $("#admin").val();
                let phone = $("#phone").val();
                if (userName === "" || password === "" || phone === "") {
                    wxd.message.notice("请填写完整信息");
                    return;
                }
                return new wxd.netty.PostRequest(
                    "/admin/account/add",
                    {
                        userName: userName,
                        password: password,
                        admin: admin,
                        phone: phone
                    },
                    (data) => {
                        if (data.code === 1) {
                            wxd.message.notice("添加成功");
                            search();
                            return true;
                        } else {
                            wxd.message.notice(data.msg);
                            return false;
                        }
                    })
                    .async(false)
                    .send();
            };
            alertBox.show();
        }

    </script>
</head>
<body>
<div class="root box">
    <div class="root_box_top btn_box" style="padding-left: 20px; padding-top: 8px; text-align: left;vertical-align: center;">
        <button onclick="search();">查询</button>
        <button onclick="addUser();">新增</button>
    </div>
    <div class="root_box_center tableDom" style="margin: 10px; padding-right: 10px;border-radius: 0; overflow-x: auto;">
        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>操作</th>
                <th>用户名</th>
                <th>管理员</th>
                <th>电话</th>
                <th>权限</th>
            </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>
    <div class="root_box_bottom">
    </div>
</div>
</body>
</html>